<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>门店管理</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
    <link href="../../css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/all-like-orderlist.css">
    <link rel="stylesheet" href="../../css/people.css">
    <link rel="stylesheet" href="../../css/jquery.pagination.css">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.js"></script>
    <!--引入时间插件-->
    <script src="../../js/moment-with-locals.min.js"></script>
    <script src="../../js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../js/echarts.common.min.js"></script>
</head>
<body>
<div id="page-wrapper">
    <div class="page-inner">
        <div class=" col-md-7 pull-left">
                <form id="form4" action="" role="form" class=""
                      onkeydown="if(event.keyCode==13){return false;}">
                    <table>
                        <div class="row">
                            <div class="col-sm-6">
                                <label>请选择要查询的年份: </label> <select class="form-control"
                                                                   id="year4">
                                <option >2018</option>
                                <option selected="selected">2019</option>
                                <option>2020</option>
                                <option>2021</option>
                                <option>2022</option>
                                <option>2023</option>
                            </select>
                            </div>
                            <div class="form-group col-lg-6 col-sm-12 col-xs-12">
                                <label>请选择: </label> <select class="form-control number"
                                                                 id="number">
                                <option value="总业绩">总业绩</option>
                                <option value="门店">门店</option>
                            </select>
                            </div>
                            <div class="form-group col-lg-6 col-sm-12 col-xs-12">
                                <label>请选择开始月份: </label> <select class="form-control minMonth4">
                                <option value="1">1月</option>
                                <option value="2">2月</option>
                                <option value="3">3月</option>
                                <option value="4">4月</option>
                                <option value="5">5月</option>
                                <option value="6">6月</option>
                                <option value="7">7月</option>
                                <option value="8">8月</option>
                                <option value="9">9月</option>
                                <option value="10">10月</option>
                                <option value="11">11月</option>
                                <option value="12">12月</option>
                            </select>
                            </div>
                            <div class="form-group col-lg-6 col-sm-12 col-xs-12">
                                <label>请选择结束月份: </label> <select class="form-control maxMonth4">
                                <option value="12">12月</option>
                                <option value="11">11月</option>
                                <option value="10">10月</option>
                                <option value="9">9月</option>
                                <option value="8">8月</option>
                                <option value="7">7月</option>
                                <option value="6">6月</option>
                                <option value="5">5月</option>
                                <option value="4">4月</option>
                                <option value="3">3月</option>
                                <option value="2">2月</option>
                                <option value="1">1月</option>
                            </select>
                            </div>
                        </div>
                    </table>
                </form>
                <!--  4根据所选择的年份和某一员工，按月统计该员工本年创造的业绩和工资变化（柱状图） -->
                <div id="d" style="width: 100%; height: 400px;"></div>
    </div>
</div>
</div>
<script type="text/javascript">

    var sumIncome4 = [];
    var count = [];
    $(document).ready(handler);
    function handler() {
        //这里是需要执行的代码
        var myDate = new Date();
        var number2 = $("#number").val();
        queryYear4(myDate.getFullYear(), number2, 1, 12);
    }
    $("#form4").bind(
        "change",
        function() {
            var year4 = $("#year4").val();
            var number = $("#number").val();
            var minMonth4 = $(".minMonth4").val();
            var maxMonth4 = $(".maxMonth4").val();
            if (parseInt(minMonth4) <= parseInt(maxMonth4)) {
                console.log("year4=" + year4 + " minMonth4="
                    + minMonth4 + " maxMonth4=" + maxMonth4
                    + " numbre=" + number);
                queryYear4(year4, number, minMonth4, maxMonth4);
            } else {
                alert("月份输入错误，最大月份要大于最小月份")
            }
        });
    function queryYear4(year4, number, minMonth4, maxMonth4) {
        var year = year4;
        var name1 = number;
        data = {
            year : year4,
            number : number,
            minMonth : minMonth4,
            maxMonth : maxMonth4,
        };
        $.ajax({
                cache : true,
                type : "post",
                url : "/system/showEcharBar1",
                data : JSON.stringify(data),
                async : true,
                contentType: "application/json",
                error : function(request) {
                    alert("Connection error:");
                },
                success : function(results) {

                    var data = results.data;
                    console.log(data);
                    count = [];
                    month4 = [];
                    var s = 0;
                    var j = 0;
                    for (; j < data.length; j++) {
                        for (var i = parseInt(minMonth4) - 1; i <= parseInt(maxMonth4); i++) {
                            if ((i + 1) == data[j].month) {
                                month4[j] = (i + 1) + "月";
                                count[j] = data[j].monthIncome;
                            }
                        }
                        if (data[j].month == undefined) {
                            break;
                        }
                    }

                    d(year, name1, minMonth4, maxMonth4);
                }
            });
    }

    function d(year, name1, minMonth, maxMonth) {
        // 根据所选择的年份和某一员工，按月统计该员工本年创造的业绩和工资变化（柱状图）
        var myChartd = echarts.init(document.getElementById('d'));
        //配置
        option = {
            title : {
                text : year + '年' + minMonth + '-' + maxMonth + '月' + name1
                + '的业绩',
            },
            tooltip : {
                trigger : 'axis'
            },
            legend : {
                data : [ '业绩'],
                left : '320',
            },
            toolbox : {
                show : true,
                feature : {
                    saveAsImage : {
                        show : true
                    }
                }
            },
            calculable : true,
            xAxis : [ {
                type : 'category',
                data : month4
            } ],
            yAxis : [ {
                type : 'value'
            } ],
            series : [ {
                name : '业绩',
                type : 'line',
                data : count,
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChartd.setOption(option);

    }
</script>

</body>
</html>